<template>
  <el-dialog :title="type === 'add' ? '新增角色' : '编辑角色'" :visible.sync="dialogVisible" width="500px"
    :before-close="closeDialog" center>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="width:400px">
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="form.roleName" size="small" placeholder="输入角色名称" />
      </el-form-item>
      <!-- 角色描述 -->
      <el-form-item label="角色描述" prop="roleDesc">
        <el-input type="textarea" :rows="3" v-model="form.roleDesc" size="small" placeholder="输入角色描述" />
      </el-form-item>
      <el-form-item label="菜单管理" prop="menuIds">
        <el-tree ref="tree" :data="menus" show-checkbox node-key="id" highlight-current default-expand-all
          :props="defaultProps"></el-tree>
      </el-form-item>
      <el-form-item style="margin-top:40px">
        <el-button style="width:100px" type="primary" @click="submit" :loading="loading">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { menu_list } from "@/api/sysmenu"
import { role_add, role_update, role_detail } from "@/api/sysrole"

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: "add"
    },
    editId: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      loading: false,
      form: {
        roleName: undefined,
        roleDesc: undefined,
        menuIds: []
      },
      rules: {
        roleName: [
          { required: true, message: "输入角色名称", trigger: "blur" }
        ],
        menuIds: [{ required: true, message: "请选择", trigger: "blur" }]
      },
      menus: [],
      defaultProps: {
        children: "children",
        label: "menuName"
      },
      expand: true
    }
  },
  watch: {
    editId(v1, v2) {
      this.form = {
        roleName: undefined,
        roleDesc: undefined,
        menuIds: []
      }
      if (this.type === "edit") {
        this.detail()
      }
    }
  },
  mounted() {
    this.menuIds = []
    this.initMenu()
  },
  methods: {
    /**
     * 角色详情
     */
    async detail() {
      const res = await role_detail(this.editId)
      this.form = res
      this.$refs.tree.setCheckedKeys(res.menuIds)
    },
    /**
     * 提交角色
     */
    async submit() {
      this.form.menuIds = this.$refs.tree.getCheckedKeys()
      const res = await this.$refs.form.validate()
      if (!res) {
        return
      }
      this.loading = true
      if (this.type === "edit") {
        let params = {
          id: this.editId,
          roleName: this.form.roleName,
          roleDesc: this.form.roleDesc,
          menuIds: this.form.menuIds
        }
        const res = await role_update(params)
        this.loading = false
        this.$message.success(res)
        this.$emit("update:dialogVisible", false)
        this.$emit("submit")
      }
      if (this.type === "add") {
        const res = await role_add(this.form)
        this.loading = false
        this.$message.success(res)
        this.$emit("update:dialogVisible", false)
        this.$emit("submit")
      }
    },
    /**
     * 初始化菜单
     */
    async initMenu() {
      const res = await menu_list()
      this.menus = res
    },
    /**
     * 关闭弹窗
     */
    closeDialog() {
      this.$refs.tree.setCheckedKeys([])
      this.$emit("update:dialogVisible", false)
    }
  }
}
</script>
<style lang="less">
.el-form-item__content {
  .el-tree {
    margin-top: 7px
  }
}
</style>
